<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>采购项目全流程可视化系统 - 移动端原型图</title>
    <link rel="stylesheet" href="https://weui.io/style/weui.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 24px;
        background-color: #f0f2f5;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
          'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #333;
      }

      .page-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: flex-start;
      }

      /* 移动端页面样式 */
      .mobile-view {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
        height: 812px;
        overflow: hidden;
        border-radius: 20px;
        margin: 0 16px 32px 0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        display: inline-flex;
        vertical-align: top;
        position: relative;
        background: #fff;
        flex-direction: column;
      }

      /* 导航栏样式 */
      .mobile-view .weui-navbar {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255, 255, 255, 0.62);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .mobile-view:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }

      .page-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        min-height: 0;
        padding-bottom: 20px;
      }

      .weui-navbar__title {
        display: inline-block;
        font-size: 17px;
        font-weight: 500;
        color: #333333;
        text-align: center;
      }
      .page {
        width: 375px;
        min-width: 375px;
        max-width: 375px;
        height: 812px;
        overflow: hidden;
        border-radius: 20px;
        margin: 0 16px 32px 0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        display: inline-block;
        vertical-align: top;
        position: relative;
        background: #fff;
        transition: all 0.3s ease;
      }

      .page:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }

      .page-title {
        position: absolute;
        top: -40px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #666;
        background: #f8f9fa;
        padding: 8px 16px;
        border-radius: 20px;
        margin: 0 auto;
        width: fit-content;
        border: 1px solid #e9ecef;
      }

      /* 模块标题样式 */
      .module-title {
        font-size: 1.5em;
        color: #1a1a1a;
        text-align: center;
        margin: 32px 0 24px 0;
        font-weight: 700;
        position: relative;
      }

      .module-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #1890ff, #40a9ff);
        border-radius: 2px;
      }

      /* 页面行布局 */
      .page-row {
        display: flex;
        flex-direction: row;
        gap: 24px;
        margin-bottom: 32px;
        flex-wrap: wrap;
        min-width: 100%;
        justify-content: flex-start;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .page {
          width: 100%;
          max-width: 375px;
          margin: 0 auto 24px auto;
        }

        .page-row {
          flex-direction: column;
          align-items: center;
        }
      }

      .weui-cell__bd {
        font-size: 15px;
      }

      .weui-cell__ft {
        font-size: 13px;
        color: #999;
      }

      .weui-btn {
        font-size: 15px;
      }

      .weui-btn_mini {
        font-size: 12px;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
      }

      .weui-badge {
        font-size: 10px;
        padding: 2px 6px;
      }

      .project-tree {
        margin-left: 20px;
      }

      .project-tree .weui-cell {
        padding-left: 0;
      }

      .project-tree .weui-cell__bd {
        font-size: 14px;
      }

      .step-bar {
        display: flex;
        overflow-x: auto;
        padding: 15px;
        background: #f8f8f8;
        border-bottom: 1px solid #e5e5e5;
      }

      .step-item {
        min-width: 80px;
        text-align: center;
        margin-right: 10px;
        position: relative;
      }

      .step-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 15px;
        right: -5px;
        width: 10px;
        height: 2px;
        background: #e5e5e5;
      }

      .step-item.completed::after {
        background: #1aad19;
      }

      .step-circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #e5e5e5;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin: 0 auto 5px;
      }

      .step-item.completed .step-circle {
        background: #1aad19;
        color: white;
      }

      .step-item.current .step-circle {
        background: #ff9500;
        color: white;
      }

      .step-name {
        font-size: 11px;
        color: #666;
        line-height: 1.2;
      }

      .step-time {
        font-size: 10px;
        color: #999;
        margin-top: 2px;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 15px;
      }

      .stats-item {
        background: white;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .stats-number {
        font-size: 24px;
        font-weight: bold;
        color: #1aad19;
        margin-bottom: 5px;
      }

      .stats-label {
        font-size: 12px;
        color: #666;
      }

      .warning-item {
        background: #fff2f0;
        border-left: 3px solid #ff4d4f;
      }

      .warning-item .weui-cell__bd {
        color: #ff4d4f;
      }

      .weui-form__control-area {
        margin: 0;
      }

      .weui-cell_active {
        background-color: #f0f0f0;
      }

      .weui-radio__label {
        display: flex;
        align-items: center;
        font-size: 15px;
      }

      .weui-radio {
        margin-right: 8px;
      }

      .weui-checkbox__label {
        display: flex;
        align-items: center;
        font-size: 15px;
      }

      .weui-checkbox {
        margin-right: 8px;
      }

      /* 搜索栏样式优化 */
      .weui-search-bar {
        background: #f8f8f8;
        padding: 8px 15px;
        position: relative;
      }

      .weui-search-bar__box {
        position: relative;
        padding-left: 30px;
        padding-right: 30px;
        height: 32px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 16px;
        font-size: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .weui-search-bar__input {
        height: 100%;
        width: 100%;
        border: 0;
        font-size: 14px;
        color: #000;
        background: transparent;
        outline: 0;
        -webkit-appearance: none;
        appearance: none;
        padding: 0 8px;
      }

      .weui-search-bar__label {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-radius: 18px;
        text-align: center;
        color: #9e9e9e;
        background: #fff;
        line-height: 36px;
        font-size: 14px;
      }

      .weui-search-bar__input:focus {
        font-size: 16px;
      }

      .weui-search-bar__input:focus + .weui-icon-clear + .weui-search-bar__label {
        opacity: 0;
      }

      .weui-search-bar__input:focus ~ .weui-search-bar__label {
        opacity: 0;
      }

      .weui-search-bar__label .weui-icon-search {
        margin-right: 5px;
      }

      .weui-search-bar__cancel-btn {
        margin-left: 10px;
        line-height: 36px;
        color: #09bb07;
        text-decoration: none;
        white-space: nowrap;
      }

      .weui-search-bar__input:not(:valid) ~ .weui-icon-clear {
        opacity: 0;
      }

      .weui-icon-search {
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 14px;
        width: 14px;
        color: #999;
      }

      .weui-icon-clear {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 14px;
        width: 14px;
        right: 12px;
        color: #999;
      }

      /* 筛选区域样式优化 */
      .weui-cells_form {
        margin-top: 0;
        padding: 6px 15px;
        background: #f8f8f8;
      }

      .weui-cells_form .weui-cell {
        padding: 6px 0;
        background: transparent;
        min-height: 32px;
      }

      .weui-cells_form .weui-cell__hd {
        min-width: 60px;
        font-size: 13px;
        color: #333;
        line-height: 20px;
      }

      .weui-cells_form .weui-cell__bd {
        text-align: right;
      }

      .weui-select {
        font-size: 13px;
        color: #666;
        border: none;
        background: transparent;
        text-align: right;
        height: 20px;
        line-height: 20px;
      }

      /* 项目列表样式优化 */
      .weui-cells {
        margin-top: 0;
      }

      .weui-cell {
        padding: 12px 15px;
        position: relative;
      }

      .weui-cell_access {
        padding-right: 35px;
      }

      .weui-cell__hd {
        min-width: 20px;
        margin-right: 10px;
      }

      .weui-cell__bd {
        flex: 1;
        font-size: 15px;
        line-height: 1.4;
      }

      .weui-cell__ft {
        font-size: 13px;
        color: #999;
        margin-left: 10px;
      }

      .weui-cell_access .weui-cell__ft:after {
        content: ' ';
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 2px 2px 0 0;
        border-color: #c0c0c0;
        border-style: solid;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: relative;
        top: -2px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: 15px;
      }

      /* 项目状态徽章优化 */
      .weui-badge {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 12px;
        color: white;
        font-weight: 500;
        min-width: 50px;
        text-align: center;
        display: inline-block;
      }

      .weui-badge_dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        padding: 0;
        min-width: 8px;
      }

      /* 超时警告样式优化 */
      .overdue-warning {
        font-size: 12px;
        color: #ff4d4f;
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .overdue-warning::before {
        content: '⚠️';
        font-size: 12px;
      }

      /* 页面内容区域 */
      .page-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 50px;
        min-height: 0;
      }

      /* 自定义滚动条样式 */
      .page-content::-webkit-scrollbar {
        width: 4px;
      }

      .page-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
      }

      .page-content::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
      }

      .page-content::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
      }

      /* 底部导航栏优化 */
      .weui-tabbar {
        background: white;
        border-top: 1px solid #e5e5e5;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0;
        flex-shrink: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        box-sizing: border-box;
        width: 100%;
      }

      .weui-tabbar__item {
        color: #999;
        flex: 1;
        text-align: center;
        padding: 4px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        height: 100%;
        box-sizing: border-box;
      }

      .weui-tabbar__item.weui-bar__item_on {
        color: #1aad19;
      }

      .weui-tabbar__icon {
        font-size: 20px;
        margin-bottom: 2px;
        line-height: 1;
      }

      .weui-tabbar__label {
        font-size: 11px;
        margin: 0;
        line-height: 1;
        white-space: nowrap;
      }

      /* 进度记录页面样式优化 */
      .project-info {
        background: #f8f8f8;
        padding: 15px;
        margin-bottom: 10px;
      }

      .project-title {
        font-weight: bold;
        font-size: 16px;
        color: #333;
        margin-bottom: 4px;
      }

      .project-details {
        font-size: 13px;
        color: #666;
        line-height: 1.4;
      }

      /* 步骤条优化 */
      .step-bar {
        display: flex;
        overflow-x: auto;
        padding: 20px 15px;
        background: #f8f8f8;
        border-bottom: 1px solid #e5e5e5;
        gap: 15px;
      }

      .step-item {
        min-width: 70px;
        text-align: center;
        position: relative;
        flex-shrink: 0;
      }

      .step-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 15px;
        right: -7px;
        width: 14px;
        height: 2px;
        background: #e5e5e5;
        z-index: 1;
      }

      .step-item.completed::after {
        background: #1aad19;
      }

      .step-circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #e5e5e5;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin: 0 auto 8px;
        font-weight: 500;
        position: relative;
        z-index: 2;
      }

      .step-item.completed .step-circle {
        background: #1aad19;
        color: white;
      }

      .step-item.completed .step-circle::before {
        content: '✓';
        font-size: 14px;
        font-weight: bold;
      }

      .step-item.current .step-circle {
        background: #ff9500;
        color: white;
      }

      .step-name {
        font-size: 11px;
        color: #666;
        line-height: 1.2;
        margin-bottom: 2px;
      }

      .step-time {
        font-size: 10px;
        color: #999;
      }

      /* 表单区域优化 */
      .weui-cells_form .weui-cell {
        padding: 12px 15px;
        background: white;
        border-bottom: 1px solid #f0f0f0;
      }

      .weui-cells_form .weui-cell:last-child {
        border-bottom: none;
      }

      .weui-cells_form .weui-cell__hd {
        min-width: 80px;
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }

      .weui-cells_form .weui-cell__bd {
        text-align: left;
      }

      .weui-input,
      .weui-textarea {
        font-size: 14px;
        color: #333;
        border: none;
        background: transparent;
        width: 100%;
      }

      .weui-textarea {
        min-height: 60px;
        resize: none;
      }

      .weui-input::placeholder,
      .weui-textarea::placeholder {
        color: #ccc;
        font-size: 14px;
      }

      /* 环节点击交互样式 */
      .step-item.completed {
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .step-item.completed:hover {
        transform: scale(1.05);
      }

      .step-item.completed:active {
        transform: scale(0.95);
      }

      /* 编辑弹窗样式 */
      .edit-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
      }

      .edit-modal.show {
        display: flex;
      }

      .edit-modal-content {
        background: white;
        border-radius: 12px;
        width: 90%;
        max-width: 360px;
        max-height: 80%;
        overflow-y: auto;
        animation: slideIn 0.3s ease;
      }

      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .edit-modal-header {
        padding: 20px 20px 0 20px;
        border-bottom: 1px solid #e5e5e5;
        text-align: center;
      }

      .edit-modal-title {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin-bottom: 15px;
      }

      .edit-modal-body {
        padding: 20px;
      }

      .edit-modal-footer {
        padding: 0 20px 20px 20px;
        display: flex;
        gap: 12px;
        justify-content: center;
      }

      .edit-modal-footer .weui-btn {
        flex: 0 0 auto;
        margin: 0;
        min-width: 90px;
        max-width: 110px;
        padding: 8px 16px;
      }

      .modal-field {
        margin-bottom: 15px;
      }

      .modal-field-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
      }

      .modal-field-value {
        font-size: 14px;
        color: #333;
        padding: 8px 12px;
        background: #f8f8f8;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
      }

      .modal-field-input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        font-size: 14px;
        box-sizing: border-box;
      }

      .modal-field-textarea {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        font-size: 14px;
        min-height: 80px;
        resize: vertical;
        box-sizing: border-box;
      }

      /* 移动端图表样式 */
      .chart-container {
        width: 100%;
        height: 200px;
        margin: 10px 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .chart-section {
        margin: 15px;
        background: white;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .chart-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 15px;
        text-align: center;
      }

      /* 统计卡片优化 */
      .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 15px;
        background: #f8f8f8;
      }

      .stats-item {
        background: white;
        border-radius: 10px;
        padding: 20px 15px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
      }

      .stats-number {
        font-size: 28px;
        font-weight: bold;
        color: #1aad19;
        margin-bottom: 6px;
        line-height: 1;
      }

      .stats-label {
        font-size: 13px;
        color: #666;
        font-weight: 500;
      }

      /* 预警项目样式优化 */
      .warning-item {
        background: #fff2f0;
        border-left: 4px solid #ff4d4f;
        margin: 0 15px;
        border-radius: 0 8px 8px 0;
      }

      .warning-item .weui-cell__bd {
        color: #333;
      }

      .warning-item .weui-cell__bd > div:first-child {
        color: #333;
        font-weight: bold;
      }

      .warning-item .weui-cell__bd > div:last-child {
        color: #ff4d4f;
        font-size: 12px;
        margin-top: 4px;
      }

      /* 进度条优化 */
      .weui-progress {
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;
      }

      .weui-progress__bar {
        height: 100%;
        border-radius: 3px;
        transition: width 0.3s ease;
      }

      /* 标题区域优化 */
      .weui-cells__title {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        padding: 15px 15px 8px 15px;
        background: #f8f8f8;
        margin: 0;
      }

      /* 统计表格样式 */
      .stats-table-container {
        margin: 16px;
        background: #fff;
        border-radius: 12px;
        overflow: visible;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        margin-bottom: 22px;
        border: 1px solid #e6e6e6;
      }

      .stats-table-title {
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        color: #222;
        padding: 14px 16px;
        background: #fafafa;
        border-bottom: 1px solid #e9ecef;
        letter-spacing: 0.5px;
      }

      .stats-table-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: 320px; /* 更大可视区，默认就能看清 */
        max-height: 480px; /* 超出在内部滚动 */
        background: #fff;
      }

      .stats-table-wrapper::-webkit-scrollbar {
        height: 6px;
      }

      .stats-table-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
      }

      .stats-table-wrapper::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
      }

      .stats-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
      }

      .stats-table {
        width: max-content; /* 根据列宽自然展开，wrapper负责滚动 */
        min-width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        table-layout: auto; /* 让浏览器根据内容分配列宽，避免逐字换行 */
      }

      /* 针对不同表格设置不同的最小宽度，确保所有列都能完整显示 */
      .stats-table-container:first-of-type .stats-table {
        min-width: 700px;
      }

      .stats-table-container:nth-of-type(2) .stats-table {
        min-width: 600px;
      }

      .stats-table-container:nth-of-type(3) .stats-table {
        min-width: 1400px;
      }

      .stats-table th,
      .stats-table td {
        border: 1px solid #4a5568; /* 深色边框提升对比度，贴近截图风格 */
        padding: 12px 8px;
        text-align: center;
        background: #fff;
        min-width: 88px; /* 默认最小宽，避免竖排 */
      }

      /* 表头允许换行，数据单元格不换行 */
      .stats-table th {
        white-space: nowrap; /* 表头不随意换行，避免汉字逐字竖排 */
        word-wrap: normal;
        line-height: 44px;
        font-size: 14px;
        height: 44px;
      }

      .stats-table td {
        white-space: nowrap;
        height: 40px;
        line-height: 40px;
      }

      /* 空单元格也占位，保证有可见行高 */
      .stats-table td:empty::after {
        content: '\00a0';
      }

      /* 第一列（行标题列）设置固定宽度和左对齐 */
      .stats-table th:first-child,
      .stats-table td:first-child {
        width: 160px;
        text-align: left;
        padding-left: 10px;
        white-space: nowrap;
        word-wrap: normal;
      }

      /* 表格1：采购项目责任组/人分配统计表 - 各列宽度设置 */
      .stats-table-container:first-of-type .stats-table th:nth-child(2),
      .stats-table-container:first-of-type .stats-table td:nth-child(2),
      .stats-table-container:first-of-type .stats-table th:nth-child(3),
      .stats-table-container:first-of-type .stats-table td:nth-child(3),
      .stats-table-container:first-of-type .stats-table th:nth-child(4),
      .stats-table-container:first-of-type .stats-table td:nth-child(4),
      .stats-table-container:first-of-type .stats-table th:nth-child(5),
      .stats-table-container:first-of-type .stats-table td:nth-child(5),
      .stats-table-container:first-of-type .stats-table th:nth-child(6),
      .stats-table-container:first-of-type .stats-table td:nth-child(6) {
        min-width: 130px; /* 指标列更宽，避免字被挤成竖排 */
      }

      /* 表格2：招标代理机构分配采购项目统计表 - 各列宽度设置 */
      .stats-table-container:nth-of-type(2) .stats-table th:nth-child(2),
      .stats-table-container:nth-of-type(2) .stats-table td:nth-child(2),
      .stats-table-container:nth-of-type(2) .stats-table th:nth-child(3),
      .stats-table-container:nth-of-type(2) .stats-table td:nth-child(3),
      .stats-table-container:nth-of-type(2) .stats-table th:nth-child(4),
      .stats-table-container:nth-of-type(2) .stats-table td:nth-child(4) {
        min-width: 140px;
      }

      /* 表格3：采购方式及时效统计表 - 各列宽度设置 */
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(2),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(2) {
        min-width: 110px;
      }
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(3),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(3) {
        min-width: 150px;
      }
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(4),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(4) {
        min-width: 170px;
      }
      /* 流标、节资、公开每组两列 */
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(5),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(5),
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(6),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(6),
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(7),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(7),
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(8),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(8),
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(9),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(9),
      .stats-table-container:nth-of-type(3) .stats-table th:nth-child(10),
      .stats-table-container:nth-of-type(3) .stats-table td:nth-child(10) {
        min-width: 110px;
      }

      .stats-table th {
        background: #fbfbfb;
        font-weight: 700;
        color: #222;
        font-size: 14px;
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 2px solid #4a5568;
        vertical-align: middle;
      }

      /* 多级表头第一行的样式 */
      .stats-table thead tr:first-child th {
        border-bottom: 1px solid #ddd;
      }

      /* 多级表头第二行的样式 */
      .stats-table thead tr:last-child th {
        border-top: 1px solid #ddd;
      }

      .stats-table tbody tr:nth-child(even) {
        background: #f9f9f9;
      }

      .stats-table tbody tr:hover {
        background: #f0f7ff;
      }

      .stats-table td {
        color: #333;
        font-size: 12px;
      }

      .stats-table tbody tr:last-child td {
        font-weight: 600;
        background: #f5f5f5;
        border-top: 2px solid #ddd;
      }
    </style>
  </head>
  <body data-weui-theme="light">
    <div class="page-container">
      <!-- 移动端-进度跟进模块 -->
      <div class="module-title">移动端-进度跟进</div>

      <!-- 页面行布局 -->
      <div class="page-row">
        <!-- 项目列表页面 -->
        <div class="mobile-view">
          <div class="page-title">项目列表页面</div>

          <!-- 顶部导航栏 -->
          <div class="weui-navbar">
            <div class="weui-navbar__item weui-navbar__item_on">
              <div class="weui-navbar__title">项目列表</div>
            </div>
          </div>

          <!-- 页面内容区域 -->
          <div class="page-content">
            <!-- 搜索和筛选区域 -->
            <div style="padding: 20px; background: #f8fafc">
              <!-- 搜索框 -->
              <div
                style="
                  background: #fff;
                  border-radius: 16px;
                  padding: 16px;
                  margin-bottom: 16px;
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                  border: 1px solid #e2e8f0;
                "
              >
                <div style="position: relative">
                  <input
                    type="search"
                    placeholder="搜索项目名称、编号"
                    style="
                      width: 100%;
                      padding: 12px 16px 12px 44px;
                      border: 2px solid #e2e8f0;
                      border-radius: 12px;
                      font-size: 16px;
                      color: #2d3748;
                      background: #f7fafc;
                      transition: all 0.2s ease;
                      box-sizing: border-box;
                    "
                    onfocus="this.style.borderColor='#667eea'; this.style.background='#fff'; this.style.boxShadow='0 0 0 3px rgba(102, 126, 234, 0.1)'"
                    onblur="this.style.borderColor='#e2e8f0'; this.style.background='#f7fafc'; this.style.boxShadow='none'"
                  />
                  <span
                    style="
                      position: absolute;
                      left: 16px;
                      top: 50%;
                      transform: translateY(-50%);
                      color: #718096;
                      font-size: 16px;
                    "
                  >
                    🔍
                  </span>
                </div>
              </div>

              <!-- 筛选器 -->
              <div
                style="
                  background: #fff;
                  border-radius: 16px;
                  padding: 16px;
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                  border: 1px solid #e2e8f0;
                "
              >
                <div style="display: flex; align-items: center; gap: 12px">
                  <span style="font-size: 14px; font-weight: 600; color: #2d3748">状态筛选</span>
                  <select
                    style="
                      flex: 1;
                      padding: 8px 12px;
                      border: 2px solid #e2e8f0;
                      border-radius: 8px;
                      font-size: 14px;
                      color: #2d3748;
                      background: #f7fafc;
                      transition: all 0.2s ease;
                    "
                    onfocus="this.style.borderColor='#667eea'; this.style.background='#fff'"
                    onblur="this.style.borderColor='#e2e8f0'; this.style.background='#f7fafc'"
                  >
                    <option>全部状态</option>
                    <option>进行中</option>
                    <option>已完成</option>
                    <option>已延期</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- 项目列表 -->
            <div style="padding: 0 20px 20px 20px; background: #f8fafc">
              <!-- 主项目卡片 -->
              <div
                style="
                  background: #fff;
                  border-radius: 20px;
                  padding: 24px;
                  margin-bottom: 20px;
                  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                  border: 1px solid #e2e8f0;
                  transition: all 0.3s ease;
                "
                onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 35px rgba(0, 0, 0, 0.12)'"
                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 25px rgba(0, 0, 0, 0.08)'"
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    margin-bottom: 16px;
                  "
                >
                  <div style="flex: 1">
                    <h3
                      style="
                        margin: 0;
                        font-size: 20px;
                        font-weight: 700;
                        color: #1a202c;
                        line-height: 1.3;
                        margin-bottom: 8px;
                      "
                    >
                      <span style="margin-right: 8px">🏢</span>
                      办公设备采购项目
                    </h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px">
                      <span
                        style="
                          background: #f7fafc;
                          color: #4a5568;
                          padding: 6px 12px;
                          border-radius: 20px;
                          font-size: 13px;
                          font-weight: 600;
                        "
                      >
                        CG2024001
                      </span>
                      <span
                        style="
                          background: #e6fffa;
                          color: #234e52;
                          padding: 6px 12px;
                          border-radius: 20px;
                          font-size: 13px;
                          font-weight: 600;
                        "
                      >
                        📋 招标公告发布
                      </span>
                    </div>
                  </div>
                  <div
                    style="
                      background: linear-gradient(135deg, #ff6b6b, #ffa726);
                      color: #fff;
                      padding: 8px 16px;
                      border-radius: 25px;
                      font-size: 13px;
                      font-weight: 700;
                      text-transform: uppercase;
                      letter-spacing: 0.5px;
                      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
                    "
                  >
                    进行中
                  </div>
                </div>

                <!-- 子项目 -->
                <div
                  style="
                    margin-top: 20px;
                    padding-left: 20px;
                    border-left: 4px solid #e2e8f0;
                    position: relative;
                  "
                >
                  <div
                    style="
                      position: absolute;
                      left: -8px;
                      top: 0;
                      width: 12px;
                      height: 12px;
                      background: #e2e8f0;
                      border-radius: 50%;
                    "
                  ></div>

                  <div
                    style="
                      background: #f8fafc;
                      border-radius: 16px;
                      padding: 16px;
                      margin-bottom: 12px;
                      border: 1px solid #e2e8f0;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; align-items: center">
                      <div>
                        <p
                          style="
                            margin: 0;
                            font-size: 16px;
                            font-weight: 600;
                            color: #2d3748;
                            margin-bottom: 4px;
                          "
                        >
                          子项目1
                        </p>
                        <p style="margin: 0; font-size: 13px; color: #718096">CG2024001-1</p>
                      </div>
                      <span
                        style="
                          background: #48bb78;
                          color: #fff;
                          padding: 6px 12px;
                          border-radius: 15px;
                          font-size: 12px;
                          font-weight: 600;
                          box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
                        "
                      >
                        已完成
                      </span>
                    </div>
                  </div>

                  <div
                    style="
                      background: #f8fafc;
                      border-radius: 16px;
                      padding: 16px;
                      border: 1px solid #e2e8f0;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; align-items: center">
                      <div>
                        <p
                          style="
                            margin: 0;
                            font-size: 16px;
                            font-weight: 600;
                            color: #2d3748;
                            margin-bottom: 4px;
                          "
                        >
                          子项目2
                        </p>
                        <p style="margin: 0; font-size: 13px; color: #718096; margin-bottom: 2px">
                          CG2024001-2
                        </p>
                        <p style="margin: 0; font-size: 13px; color: #4a5568">📋 合同签订</p>
                      </div>
                      <span
                        style="
                          background: linear-gradient(135deg, #ff6b6b, #ffa726);
                          color: #fff;
                          padding: 6px 12px;
                          border-radius: 15px;
                          font-size: 12px;
                          font-weight: 600;
                          box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
                        "
                      >
                        进行中
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 主项目2 -->
              <div
                style="
                  background: #fff;
                  border-radius: 20px;
                  padding: 24px;
                  margin-bottom: 20px;
                  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                  border: 1px solid #e2e8f0;
                  transition: all 0.3s ease;
                "
                onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 35px rgba(0, 0, 0, 0.12)'"
                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 25px rgba(0, 0, 0, 0.08)'"
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    margin-bottom: 16px;
                  "
                >
                  <div style="flex: 1">
                    <h3
                      style="
                        margin: 0;
                        font-size: 20px;
                        font-weight: 700;
                        color: #1a202c;
                        line-height: 1.3;
                        margin-bottom: 8px;
                      "
                    >
                      <span style="margin-right: 8px">💻</span>
                      IT设备采购项目
                    </h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 12px">
                      <span
                        style="
                          background: #f7fafc;
                          color: #4a5568;
                          padding: 6px 12px;
                          border-radius: 20px;
                          font-size: 13px;
                          font-weight: 600;
                        "
                      >
                        CG2024002
                      </span>
                      <span
                        style="
                          background: #e6fffa;
                          color: #234e52;
                          padding: 6px 12px;
                          border-radius: 20px;
                          font-size: 13px;
                          font-weight: 600;
                        "
                      >
                        📋 评标
                      </span>
                    </div>
                  </div>
                  <div
                    style="
                      background: linear-gradient(135deg, #ff6b6b, #ffa726);
                      color: #fff;
                      padding: 8px 16px;
                      border-radius: 25px;
                      font-size: 13px;
                      font-weight: 700;
                      text-transform: uppercase;
                      letter-spacing: 0.5px;
                      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
                    "
                  >
                    进行中
                  </div>
                </div>
              </div>

              <!-- 主项目3 -->
              <div
                style="
                  background: #fff;
                  border-radius: 20px;
                  padding: 24px;
                  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                  border: 1px solid #e2e8f0;
                  transition: all 0.3s ease;
                "
                onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 12px 35px rgba(0, 0, 0, 0.12)'"
                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 25px rgba(0, 0, 0, 0.08)'"
              >
                <div style="display: flex; justify-content: space-between; align-items: flex-start">
                  <div style="flex: 1">
                    <h3
                      style="
                        margin: 0;
                        font-size: 20px;
                        font-weight: 700;
                        color: #1a202c;
                        line-height: 1.3;
                        margin-bottom: 8px;
                      "
                    >
                      <span style="margin-right: 8px">🏗️</span>
                      装修工程采购项目
                    </h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 12px">
                      <span
                        style="
                          background: #f7fafc;
                          color: #4a5568;
                          padding: 6px 12px;
                          border-radius: 20px;
                          font-size: 13px;
                          font-weight: 600;
                        "
                      >
                        CG2024003
                      </span>
                    </div>
                  </div>
                  <div
                    style="
                      background: #48bb78;
                      color: #fff;
                      padding: 8px 16px;
                      border-radius: 25px;
                      font-size: 13px;
                      font-weight: 700;
                      text-transform: uppercase;
                      letter-spacing: 0.5px;
                      box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
                    "
                  >
                    已完成
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部操作栏 -->
          <div class="weui-tabbar">
            <div class="weui-tabbar__item weui-bar__item_on">
              <div class="weui-tabbar__icon">
                <i class="weui-icon-success"></i>
              </div>
              <p class="weui-tabbar__label">项目列表</p>
            </div>
            <div class="weui-tabbar__item">
              <div class="weui-tabbar__icon">
                <i class="weui-icon-info"></i>
              </div>
              <p class="weui-tabbar__label">统计概览</p>
            </div>
          </div>
        </div>

        <!-- 进度记录页面 -->
        <div class="mobile-view">
          <!-- 顶部导航栏 -->
          <div class="weui-navbar">
            <div class="weui-navbar__item weui-navbar__item_on">
              <div class="weui-navbar__title">进度记录</div>
            </div>
          </div>

          <!-- 页面内容区域 -->
          <div class="page-content">
            <!-- 项目信息 -->
            <div class="project-info">
              <div class="project-title">办公设备采购项目</div>
              <div class="project-details">项目编号：CG2024001 | 当前环节：公告公示发布</div>
            </div>

            <!-- 简化的环节步骤条 -->
            <div
              style="
                position: sticky;
                top: 0;
                z-index: 10;
                background: #fff;
                border-bottom: 1px solid #e2e8f0;
                padding: 12px 20px;
              "
            >
              <div style="font-size: 14px; font-weight: 600; color: #2d3748; margin-bottom: 8px">
                项目进度
              </div>

              <div
                style="
                  display: flex;
                  overflow-x: auto;
                  gap: 24px;
                  padding: 8px 0;
                  position: relative;
                "
              >
                <!-- 步骤1-4：已完成 -->
                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(1)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: linear-gradient(135deg, #48bb78, #38a169);
                      color: #fff;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                      box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
                    "
                  >
                    ✓
                  </div>
                  <div style="font-size: 10px; color: #2d3748; font-weight: 600; line-height: 1.2">
                    采购立项及采购需求文件编制
                  </div>
                  <div style="font-size: 9px; color: #718096">2024-01-15</div>
                </div>

                <!-- 连接线1 -->
                <div
                  style="
                    width: 24px;
                    height: 3px;
                    background: #48bb78;
                    margin: 15px 0 0;
                    border-radius: 2px;
                    flex-shrink: 0;
                  "
                ></div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(2)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: linear-gradient(135deg, #48bb78, #38a169);
                      color: #fff;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                      box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
                    "
                  >
                    ✓
                  </div>
                  <div style="font-size: 10px; color: #2d3748; font-weight: 600; line-height: 1.2">
                    集中采购需求申请接收
                  </div>
                  <div style="font-size: 9px; color: #718096">2024-01-16</div>
                </div>

                <!-- 连接线2 -->
                <div
                  style="
                    width: 24px;
                    height: 3px;
                    background: #48bb78;
                    margin: 15px 0 0;
                    border-radius: 2px;
                    flex-shrink: 0;
                  "
                ></div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(3)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: linear-gradient(135deg, #48bb78, #38a169);
                      color: #fff;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                      box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
                    "
                  >
                    ✓
                  </div>
                  <div style="font-size: 10px; color: #2d3748; font-weight: 600; line-height: 1.2">
                    采购方案制订
                  </div>
                  <div style="font-size: 9px; color: #718096">2024-01-20</div>
                </div>

                <!-- 连接线3 -->
                <div
                  style="
                    width: 24px;
                    height: 3px;
                    background: #48bb78;
                    margin: 15px 0 0;
                    border-radius: 2px;
                    flex-shrink: 0;
                  "
                ></div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(4)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: linear-gradient(135deg, #48bb78, #38a169);
                      color: #fff;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                      box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
                    "
                  >
                    ✓
                  </div>
                  <div style="font-size: 10px; color: #2d3748; font-weight: 600; line-height: 1.2">
                    采购方案审批
                  </div>
                  <div style="font-size: 9px; color: #718096">2024-01-25</div>
                </div>

                <!-- 连接线4 -->
                <div
                  style="
                    width: 24px;
                    height: 3px;
                    background: #ff6b6b;
                    margin: 15px 0 0;
                    border-radius: 2px;
                    flex-shrink: 0;
                  "
                ></div>

                <!-- 步骤5：当前步骤 -->
                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(5)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: linear-gradient(135deg, #ff6b6b, #ffa726);
                      color: #fff;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
                    "
                  >
                    5
                  </div>
                  <div style="font-size: 10px; color: #2d3748; font-weight: 600; line-height: 1.2">
                    公告公示发布
                  </div>
                  <div style="font-size: 9px; color: #ff6b6b; font-weight: 600">进行中</div>
                </div>

                <!-- 连接线5 -->
                <div
                  style="
                    width: 24px;
                    height: 3px;
                    background: #e2e8f0;
                    margin: 15px 0 0;
                    border-radius: 2px;
                    flex-shrink: 0;
                  "
                ></div>

                <!-- 步骤6-14：待开始 -->
                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(6)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    6
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    采购项目实施
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <!-- 连接线6 -->
                <div
                  style="
                    width: 24px;
                    height: 3px;
                    background: #e2e8f0;
                    margin: 15px 0 0;
                    border-radius: 2px;
                    flex-shrink: 0;
                  "
                ></div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(7)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    7
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    采购结果撰写
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(8)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    8
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    采购结果审批
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(9)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    9
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    采购结果公示发布
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(10)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    10
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    合同拟定
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(11)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    11
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    合同会签
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(12)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    12
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    合同法律审查
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(13)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    13
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    合同文本审定及用印
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>

                <div
                  style="
                    min-width: 80px;
                    text-align: center;
                    cursor: pointer;
                    position: relative;
                    z-index: 2;
                  "
                  onclick="openEditModal(14)"
                >
                  <div
                    style="
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      background: #e2e8f0;
                      color: #a0aec0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      font-weight: 700;
                      margin: 0 auto 4px;
                    "
                  >
                    14
                  </div>
                  <div style="font-size: 10px; color: #a0aec0; font-weight: 600; line-height: 1.2">
                    合同寄收
                  </div>
                  <div style="font-size: 9px; color: #a0aec0">待开始</div>
                </div>
              </div>
            </div>

            <!-- 当前环节记录 -->
            <div style="padding: 20px; background: #f8fafc">
              <!-- 环节信息卡片 -->
              <div
                style="
                  background: #fff;
                  border-radius: 16px;
                  padding: 20px;
                  margin-bottom: 16px;
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                  border: 1px solid #e2e8f0;
                "
              >
                <h3
                  style="
                    margin: 0 0 16px 0;
                    font-size: 16px;
                    font-weight: 700;
                    color: #1a202c;
                    display: flex;
                    align-items: center;
                  "
                >
                  <span
                    style="
                      background: linear-gradient(135deg, #667eea, #764ba2);
                      color: #fff;
                      width: 24px;
                      height: 24px;
                      border-radius: 12px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      margin-right: 8px;
                    "
                  >
                    📋
                  </span>
                  环节信息
                </h3>

                <div style="display: grid; gap: 12px">
                  <div style="background: #f7fafc; border-radius: 12px; padding: 16px">
                    <label
                      style="
                        display: block;
                        font-size: 12px;
                        font-weight: 600;
                        color: #718096;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        margin-bottom: 6px;
                      "
                    >
                      当前环节
                    </label>
                    <div style="font-size: 16px; font-weight: 600; color: #2d3748">
                      公告公示发布
                    </div>
                  </div>

                  <div style="background: #f7fafc; border-radius: 12px; padding: 16px">
                    <label
                      style="
                        display: block;
                        font-size: 12px;
                        font-weight: 600;
                        color: #718096;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        margin-bottom: 6px;
                      "
                    >
                      开始时间
                    </label>
                    <div style="font-size: 16px; font-weight: 600; color: #2d3748">2024-01-25</div>
                  </div>

                  <div style="background: #f7fafc; border-radius: 12px; padding: 16px">
                    <label
                      style="
                        display: block;
                        font-size: 12px;
                        font-weight: 600;
                        color: #718096;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        margin-bottom: 6px;
                      "
                    >
                      建议时限
                    </label>
                    <div style="font-size: 16px; font-weight: 600; color: #2d3748">5天</div>
                  </div>
                </div>
              </div>

              <!-- 操作记录卡片 -->
              <div
                style="
                  background: #fff;
                  border-radius: 16px;
                  padding: 20px;
                  margin-bottom: 16px;
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                  border: 1px solid #e2e8f0;
                "
              >
                <h3
                  style="
                    margin: 0 0 16px 0;
                    font-size: 16px;
                    font-weight: 700;
                    color: #1a202c;
                    display: flex;
                    align-items: center;
                  "
                >
                  <span
                    style="
                      background: linear-gradient(135deg, #ff6b6b, #ffa726);
                      color: #fff;
                      width: 24px;
                      height: 24px;
                      border-radius: 12px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 12px;
                      margin-right: 8px;
                    "
                  >
                    ✏️
                  </span>
                  操作记录
                </h3>

                <div style="display: grid; gap: 16px">
                  <div>
                    <label
                      style="
                        display: block;
                        font-size: 14px;
                        font-weight: 600;
                        color: #2d3748;
                        margin-bottom: 8px;
                      "
                    >
                      完成时间
                    </label>
                    <input
                      type="date"
                      value="2024-01-30"
                      style="
                        width: 100%;
                        padding: 12px 16px;
                        border: 2px solid #e2e8f0;
                        border-radius: 12px;
                        font-size: 16px;
                        color: #2d3748;
                        background: #fff;
                        transition: all 0.2s ease;
                        box-sizing: border-box;
                      "
                      onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 3px rgba(102, 126, 234, 0.1)'"
                      onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'"
                    />
                  </div>

                  <div>
                    <label
                      style="
                        display: block;
                        font-size: 14px;
                        font-weight: 600;
                        color: #2d3748;
                        margin-bottom: 8px;
                      "
                    >
                      备注内容
                    </label>
                    <textarea
                      placeholder="该环节已超时，请填写原因"
                      rows="4"
                      style="
                        width: 100%;
                        padding: 12px 16px;
                        border: 2px solid #e2e8f0;
                        border-radius: 12px;
                        font-size: 16px;
                        color: #2d3748;
                        background: #fff;
                        resize: none;
                        min-height: 100px;
                        transition: all 0.2s ease;
                        box-sizing: border-box;
                        font-family: inherit;
                      "
                      onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 3px rgba(102, 126, 234, 0.1)'"
                      onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'"
                    ></textarea>
                  </div>

                  <div>
                    <label
                      style="
                        display: block;
                        font-size: 14px;
                        font-weight: 600;
                        color: #2d3748;
                        margin-bottom: 8px;
                      "
                    >
                      转办给
                    </label>
                    <select
                      style="
                        width: 100%;
                        padding: 12px 16px;
                        border: 2px solid #e2e8f0;
                        border-radius: 12px;
                        font-size: 16px;
                        color: #2d3748;
                        background: #fff;
                        transition: all 0.2s ease;
                        box-sizing: border-box;
                      "
                      onfocus="this.style.borderColor='#667eea'; this.style.boxShadow='0 0 0 3px rgba(102, 126, 234, 0.1)'"
                      onblur="this.style.borderColor='#e2e8f0'; this.style.boxShadow='none'"
                    >
                      <option value="self">我自己(默认)</option>
                      <option value="zhangsan">张三</option>
                      <option value="lisi">李四</option>
                      <option value="wangwu">王五</option>
                    </select>
                  </div>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div style="display: flex; gap: 12px; margin-top: 8px">
                <button
                  style="
                    flex: 1;
                    background: linear-gradient(135deg, #667eea, #764ba2);
                    color: #fff;
                    border: none;
                    border-radius: 12px;
                    padding: 16px;
                    font-size: 16px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
                  "
                  onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(102, 126, 234, 0.4)'"
                  onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(102, 126, 234, 0.3)'"
                >
                  保存记录
                </button>
                <button
                  style="
                    flex: 1;
                    background: #fff;
                    color: #718096;
                    border: 2px solid #e2e8f0;
                    border-radius: 12px;
                    padding: 16px;
                    font-size: 16px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.2s ease;
                  "
                  onmouseover="this.style.borderColor='#cbd5e0'; this.style.color='#4a5568'"
                  onmouseout="this.style.borderColor='#e2e8f0'; this.style.color='#718096'"
                >
                  取消
                </button>
              </div>
            </div>
          </div>

          <!-- 编辑弹窗 -->
          <div class="edit-modal" id="editModal">
            <div class="edit-modal-content">
              <div class="edit-modal-header">
                <div class="edit-modal-title" id="modalTitle">环节详情</div>
              </div>
              <div class="edit-modal-body">
                <div class="modal-field">
                  <div class="modal-field-label">环节名称</div>
                  <div class="modal-field-value" id="modalStepName">需求确认</div>
                </div>
                <div class="modal-field">
                  <div class="modal-field-label">开始时间</div>
                  <input
                    type="text"
                    class="modal-field-input"
                    id="modalStartTime"
                    value="2024-01-20"
                  />
                </div>
                <div class="modal-field">
                  <div class="modal-field-label">完成时间</div>
                  <input
                    type="text"
                    class="modal-field-input"
                    id="modalEndTime"
                    value="2024-01-20"
                  />
                </div>
                <div class="modal-field">
                  <div class="modal-field-label">标准时限</div>
                  <input type="text" class="modal-field-input" id="modalTimeLimit" value="1天" />
                </div>

                <!-- 第二个环节特有字段 -->
                <div class="modal-field" id="agentFields" style="display: none">
                  <div class="modal-field-label">是否需要代理</div>
                  <select class="modal-field-input" id="needAgent" onchange="toggleAgentOptions()">
                    <option value="否">否</option>
                    <option value="是">是</option>
                  </select>
                </div>
                <div class="modal-field" id="selectModeField" style="display: none">
                  <div class="modal-field-label">选择模式</div>
                  <select class="modal-field-input" id="selectMode" onchange="toggleAgentCompany()">
                    <option value="指定">指定</option>
                    <option value="随机">随机</option>
                  </select>
                </div>
                <div class="modal-field" id="agentCompanyField" style="display: none">
                  <div class="modal-field-label">代理公司</div>
                  <select class="modal-field-input" id="agentCompany" onchange="checkAgentModify()">
                    <option value="">请选择代理公司</option>
                    <option value="江苏招标代理有限公司">江苏招标代理有限公司</option>
                    <option value="南京招标咨询公司">南京招标咨询公司</option>
                    <option value="苏州招标服务公司">苏州招标服务公司</option>
                  </select>
                </div>
                <div class="modal-field" id="modifyReasonField" style="display: none">
                  <div class="modal-field-label">修改原因(必填)</div>
                  <textarea
                    class="modal-field-textarea"
                    id="modifyReason"
                    placeholder="请填写修改原因"
                  ></textarea>
                </div>

                <div class="modal-field">
                  <div class="modal-field-label">备注内容</div>
                  <textarea
                    class="modal-field-textarea"
                    id="modalRemarks"
                    placeholder="请输入备注信息"
                  >
已完成需求确认，确认采购设备清单和规格要求。</textarea
                  >
                </div>
              </div>
              <div class="edit-modal-footer">
                <a class="weui-btn weui-btn_primary" href="javascript:void(0)" onclick="saveEdit()">
                  保存修改
                </a>
                <a
                  class="weui-btn weui-btn_default"
                  href="javascript:void(0)"
                  onclick="closeEditModal()"
                >
                  取消
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 移动端-统计分析模块 -->
      <div class="module-title">移动端-统计分析</div>

      <!-- 页面行布局 -->
      <div class="page-row">
        <!-- 统计概览页面 -->
        <div class="mobile-view">
          <div class="page-title">统计概览页面</div>

          <!-- 顶部导航栏 -->
          <div class="weui-navbar">
            <div class="weui-navbar__item weui-navbar__item_on">
              <div class="weui-navbar__title">统计概览</div>
            </div>
          </div>

          <!-- 页面内容区域 -->
          <div class="page-content">
            <!-- 统计概览 -->
            <div class="stats-grid">
              <div class="stats-item">
                <div class="stats-number">15</div>
                <div class="stats-label">总项目数</div>
              </div>
              <div class="stats-item">
                <div class="stats-number">8</div>
                <div class="stats-label">进行中</div>
              </div>
              <div class="stats-item">
                <div class="stats-number">5</div>
                <div class="stats-label">已完成</div>
              </div>
              <div class="stats-item">
                <div class="stats-number">2</div>
                <div class="stats-label">已暂停</div>
              </div>
              <div class="stats-item">
                <div class="stats-number">3,500</div>
                <div class="stats-label">总预算(万元)</div>
              </div>
              <div class="stats-item">
                <div class="stats-number">2,100</div>
                <div class="stats-label">已使用(万元)</div>
              </div>
            </div>

            <!-- 采购项目责任组/人分配统计表 -->
            <div class="stats-table-container">
              <div class="stats-table-title">采购项目责任组/人分配统计表</div>
              <div class="stats-table-wrapper">
                <table class="stats-table">
                  <thead>
                    <tr>
                      <th>采购项目责任组/人</th>
                      <th>已分配项目数量</th>
                      <th>已完成项目数量</th>
                      <th>待办项目数量</th>
                      <th>采购方案待完成数量</th>
                      <th>采购实施待完成数量</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>项目1组</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>田明嘉</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>项目2组</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>陈尚龙</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>朱曼</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>邢璐</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 招标代理机构分配采购项目统计表 -->
            <div class="stats-table-container">
              <div class="stats-table-title">招标代理机构分配采购项目统计表</div>
              <div class="stats-table-wrapper">
                <table class="stats-table">
                  <thead>
                    <tr>
                      <th>机构</th>
                      <th>已分配项目数量</th>
                      <th>已完成项目数量</th>
                      <th>待办项目数量</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>代理公司1</td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>代理公司2</td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>代理公司3</td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>代理公司4</td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 采购方式及时效统计表 -->
            <div class="stats-table-container">
              <div class="stats-table-title">采购方式及时效统计表</div>
              <div class="stats-table-wrapper">
                <table class="stats-table">
                  <thead>
                    <tr>
                      <th rowspan="2">采购方式</th>
                      <th rowspan="2">项目数量</th>
                      <th rowspan="2">项目金额(万元)</th>
                      <th rowspan="2">全流程平均时长(天)</th>
                      <th colspan="2">流标</th>
                      <th colspan="2">节资</th>
                      <th colspan="2">公开</th>
                    </tr>
                    <tr>
                      <th>数量</th>
                      <th>率</th>
                      <th>金额</th>
                      <th>率</th>
                      <th>招标</th>
                      <th>率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>公开招标</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>公开竞争性磋商</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>邀请招标</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>邀请竞争性磋商</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>单一来源</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>询价</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>框架协议</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>直接采购</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>竞争性谈判</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>竞争性磋商</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>其他</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>合计</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- 底部操作栏 -->
          <div class="weui-tabbar">
            <div class="weui-tabbar__item">
              <div class="weui-tabbar__icon">
                <i class="weui-icon-success"></i>
              </div>
              <p class="weui-tabbar__label">项目列表</p>
            </div>
            <div class="weui-tabbar__item weui-bar__item_on">
              <div class="weui-tabbar__icon">
                <i class="weui-icon-info"></i>
              </div>
              <p class="weui-tabbar__label">统计概览</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      // 环节数据
      const stepData = {
        1: {
          name: '采购立项及采购需求文件编制',
          startTime: '2024-01-15 09:00',
          endTime: '2024-01-15 17:00',
          timeLimit: '5天',
          remarks: '已完成采购立项及需求文件编制，确定采购需求和规格要求。',
        },
        2: {
          name: '集中采购需求申请接收',
          startTime: '2024-01-16 09:00',
          endTime: '2024-01-16 17:00',
          timeLimit: '1天',
          remarks: '已完成需求申请接收，确认采购需求。',
        },
        3: {
          name: '采购方案制订',
          startTime: '2024-01-17 09:00',
          endTime: '2024-01-20 17:00',
          timeLimit: '7天',
          remarks: '已完成采购方案制订，确定采购方式和流程。',
        },
        4: {
          name: '采购方案审批',
          startTime: '2024-01-21 09:00',
          endTime: '2024-01-25 17:00',
          timeLimit: '3天',
          remarks: '已完成采购方案审批，获得批准。',
        },
        5: {
          name: '公告公示发布',
          startTime: '2024-01-26 09:00',
          endTime: '',
          timeLimit: '20天',
          remarks: '正在发布公告公示，等待投标人报名。',
        },
        6: {
          name: '采购项目实施',
          startTime: '',
          endTime: '',
          timeLimit: '30天',
          remarks: '',
        },
        7: {
          name: '采购结果撰写',
          startTime: '',
          endTime: '',
          timeLimit: '5天',
          remarks: '',
        },
        8: {
          name: '采购结果审批',
          startTime: '',
          endTime: '',
          timeLimit: '3天',
          remarks: '',
        },
        9: {
          name: '采购结果公示发布',
          startTime: '',
          endTime: '',
          timeLimit: '7天',
          remarks: '',
        },
        10: {
          name: '合同拟定',
          startTime: '',
          endTime: '',
          timeLimit: '7天',
          remarks: '',
        },
        11: {
          name: '合同会签',
          startTime: '',
          endTime: '',
          timeLimit: '5天',
          remarks: '',
        },
        12: {
          name: '合同法律审查',
          startTime: '',
          endTime: '',
          timeLimit: '3天',
          remarks: '',
        },
        13: {
          name: '合同文本审定及用印',
          startTime: '',
          endTime: '',
          timeLimit: '3天',
          remarks: '',
        },
        14: {
          name: '合同寄收',
          startTime: '',
          endTime: '',
          timeLimit: '5天',
          remarks: '',
        },
      }

      // 打开编辑弹窗
      function openEditModal(stepId) {
        const modal = document.getElementById('editModal')
        const data = stepData[stepId]

        if (data) {
          document.getElementById('modalTitle').textContent = data.name + ' - 环节详情'
          document.getElementById('modalStepName').textContent = data.name
          document.getElementById('modalStartTime').value = data.startTime
          document.getElementById('modalEndTime').value = data.endTime
          document.getElementById('modalTimeLimit').value = data.timeLimit
          document.getElementById('modalRemarks').value = data.remarks

          // 如果是集中采购需求申请接收环节,显示代理相关字段
          if (stepId === 2) {
            document.getElementById('agentFields').style.display = 'block'
          } else {
            document.getElementById('agentFields').style.display = 'none'
            document.getElementById('selectModeField').style.display = 'none'
            document.getElementById('agentCompanyField').style.display = 'none'
            document.getElementById('modifyReasonField').style.display = 'none'
          }

          modal.classList.add('show')
        }
      }

      // 切换代理选项显示
      function toggleAgentOptions() {
        const needAgent = document.getElementById('needAgent').value
        if (needAgent === '是') {
          document.getElementById('selectModeField').style.display = 'block'
          toggleAgentCompany()
        } else {
          document.getElementById('selectModeField').style.display = 'none'
          document.getElementById('agentCompanyField').style.display = 'none'
          document.getElementById('modifyReasonField').style.display = 'none'
        }
      }

      // 切换代理公司选择显示
      function toggleAgentCompany() {
        const selectMode = document.getElementById('selectMode').value
        const agentCompanyField = document.getElementById('agentCompanyField')
        const agentCompany = document.getElementById('agentCompany')

        agentCompanyField.style.display = 'block'

        if (selectMode === '随机') {
          // 随机模式,设置默认值
          agentCompany.value = '江苏招标代理有限公司'
          agentCompany.dataset.randomValue = '江苏招标代理有限公司'
        } else {
          // 指定模式,清空选择
          agentCompany.value = ''
          agentCompany.dataset.randomValue = ''
        }
      }

      // 检查代理公司是否修改
      function checkAgentModify() {
        const selectMode = document.getElementById('selectMode').value
        const agentCompany = document.getElementById('agentCompany')
        const randomValue = agentCompany.dataset.randomValue

        if (selectMode === '随机' && randomValue && agentCompany.value !== randomValue) {
          document.getElementById('modifyReasonField').style.display = 'block'
        } else {
          document.getElementById('modifyReasonField').style.display = 'none'
        }
      }

      // 关闭编辑弹窗
      function closeEditModal() {
        const modal = document.getElementById('editModal')
        modal.classList.remove('show')
      }

      // 保存修改
      function saveEdit() {
        // 这里可以添加保存逻辑
        alert('保存成功！')
        closeEditModal()
      }

      // 点击弹窗背景关闭弹窗
      document.getElementById('editModal').addEventListener('click', function (e) {
        if (e.target === this) {
          closeEditModal()
        }
      })

      // 阻止弹窗内容点击事件冒泡
      document.querySelector('.edit-modal-content').addEventListener('click', function (e) {
        e.stopPropagation()
      })
    </script>
  </body>
</html>
